<template>
	<!-- 账变记录 -->
	<view class="bill-change-record">
		<nav-bar :title="i18n.bill.title" @_back="_back" />
		<view class="screen-box dis-between" @click="openClick">
			<image class="image" src="../../static/images/icon/screen.png" mode="widthFix"></image>
			<text class="white-text">{{i18n.bill.screen}}</text>
			<u-icon name="arrow-down" color="rgba(255, 255, 255, .4)" size="12"></u-icon>
		</view>
		<view class="container">
			<record-list v-for="item in list" :key="item.id" :obj="item" @click="recordClick" />
		</view>
		<u-empty v-if="isEmpty && !list.length"  :text="i18n.common.noHistory" mode="history"></u-empty> 
		<!-- 筛选弹窗 -->
		<select-currency ref="scrren" :list="scrrenList">
			<view class="scrren-container">
				<view class="dis-between">
					<text>{{i18n.bill.AccountChangeType}}</text>
					<dropdown-box :regionList="scrrenList" :currentId="info.type" @click="scrrenClick"></dropdown-box>
				</view>
				<view class="dis-between">
					<text>{{i18n.bill.currency}}</text>
					<dropdown-box :regionList="list1" :currentId="info.currency" @click="list1Click"></dropdown-box>
				</view>
				<view class="dis-between">
					<text>{{i18n.bill.AccountType}}</text>
					<dropdown-box :regionList="list2" :currentId="info.balance" @click="list2Click"></dropdown-box>
				</view>
			</view>
			<custom-submit :title="i18n.common.confirm" :loading="loading" @click="close"></custom-submit>
		</select-currency>
		<custom-loading text="" mask="true" click="true" ref="loading"></custom-loading>
	</view>
</template>

<script>
	import mixin from '@/utils/minix.js'
	import RecordList from '@/components/Record/index.vue'
	import SelectCurrency from '@/components/SelectCurrency/vue.vue';
	import DropdownBox from '@/components/DropdownBox/index.vue'
	import CustomSubmit from '@/components/CustomSubmit/index.vue'
	import CustomLoading from '@/components/Loadidng/index.vue'
	import {
		walletLegal_log
	} from '@/api/index.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		mixins: [mixin],
		components: {
			RecordList,
			SelectCurrency,
			DropdownBox,
			CustomSubmit,
			CustomLoading
		},
		computed:{
			...mapGetters(['token', 'currencyList', 'ferredList']),
			i18n() {
				return this.$t('message');
			},
		},
		data() {
			return {
				list: [],
				scrrenList: [{
						value: '兑换转出',
						id: 106
					},
					{
						value: '兑换转入',
						id: 105
					},
					{
						value: '钱包充币',
						id: 8
					},
					{
						value: '钱包提币',
						id: 7
					},
					{
						value: '提币手续费',
						id: 107
					},
					{
						value: '提币退款',
						id: 108
					},
					{
						value: '周期交易买入',
						id: 109
					},
					{
						value: '周期交易卖出',
						id: 110
					},
					{
						value: '周期交易成交',
						id: 111
					},
					{
						value: '点位交易买入',
						id: 112
					},
					{
						value: '点位交易卖出',
						id: 113
					},
					{
						value: '点位交易成交',
						id: 114
					},
				],
				list1: [],
				list2: [],
				isEmpty: false,
				info: {
					type: 0,
					currency: 0,
					balance: 0
				},
				loading: false
			}
		},
		mounted() {
			this.loadList();
			this.loadHidden();
			this.$refs.loading.open();
		},
		methods: {
			recordClick(id) {
				uni.navigateTo({
					url: '/pages/bill/detail?id=' + id
				})
			},
			openClick() {
				this.$refs.scrren.open()
			},
			close() {
				this.loadList();
				this.$refs.scrren.close();
			},
			async loadList() {
				this.info.token = this.token;
				let {error, res} = await walletLegal_log(this.info);
				this.$refs.loading.close();
				if (error) return;
				this.list = [];
				let data = res.list || [];
				for (let i in data) {
					let obj = {
						address: data[i].info,
						create_time: data[i].created_time,
						number: data[i].value + data[i].currency_name,
						status: data[i].type,
						id: data[i].id
					}
					this.list.push(obj)
				}
				this.isEmpty = true;
			},
			loadHidden() {
				for (let i in this.currencyList) {
					let obj = {
						value: this.currencyList[i].title,
						id: this.currencyList[i].id
					}
					this.list1.push(obj)
				}
				for (let o in this.ferredList) {
					let item = {
						value: this.ferredList[o].title,
						id: this.ferredList[o].id
					}
					this.list2.push(item)
				}
			},
			scrrenClick(val) {
				this.info.type = val.id;
			},
			list1Click(val) {
				this.info.currency = val.id;
			},
			list2Click(val) {
				this.info.balance = val.id;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bill-change-record {
		.screen-box {
			padding: 0 30rpx 30rpx;
			height: 62rpx;
			border-bottom: 1px solid rgba(255, 255, 255, .1);
			font-size: 30rpx;
			align-items: center;
			margin-top: 60rpx;
			margin-bottom: 32rpx;

			.image {
				width: 32rpx;
			}

			.white-text {
				display: inline-block;
				width: calc(100% - 90rpx);
			}
		}

		.scrren-container {
			padding-bottom: 30rpx;
			height: 900rpx;
			.dis-between {
				color: rgba(255, 255, 255, .4);
				height: 80rpx;
				align-items: center;
				margin-bottom: 30rpx;
			}
		}
	}
</style>
